Adding Streaming Media to Your Web Site with Windows Media Technologies

  • Article

Published: February 24, 1999 | Updated: April 11, 2005

By John Green, Microsoft Corporation

This training is geared for beginning and semi-experienced Web developers who want to understand the basics of integrating multimedia into Web sites. Each section of the road map defines your tasks so you can get started. At the end of each section you will find links to additional resources and articles.

Many of the reference links will take you out of the road map area—so be sure to add this page to your favorites, and refer to it as you develop media for your Web site. When viewing articles in the MSDN Online section, you can look for additional articles on the same subject by clicking "show TOC" at the top of the article.

Note: This lesson assumes your system has a sound card and speakers.

On This Page

Getting Started Getting Started
Part 1: Getting Started Part 1: Getting Started
Part 2: Creating Audio ASF Files Part 2: Creating Audio ASF Files
Part 3: Creating Video ASF Files Part 3: Creating Video ASF Files
Part 4: Serving Your Files Part 4: Serving Your Files
Part 5: Adding the Stand-alone Windows Media Player Part 5: Adding the Stand-alone Windows Media Player
Part 6: Embedding the Windows Media Player Part 6: Embedding the Windows Media Player

Getting Started

Adding streaming media to your Web site requires a good deal of planning. You'll need to know where and how you want to introduce your streaming media and the general type of streaming media that you'd like to send out. We'll get you started by addressing the basic concerns of streaming media development.

Beginning with Streaming Media

Your success in the world of streaming media requires a bit of specialized knowledge. Here, we'll give you an introductory course on how this technology works. We'll talk about bandwidth, codecs, and the Advanced Streaming File format (ASF).

Creating Audio ASF Files

With your newfound understanding of how streaming media works, it's time to create some. We'll explore the Windows Media Encoder, and walk you through creating your first ASF file.

Creating Video ASF Files

Now that we've got audio content creation under our belt, it is time to add the next component, video. Since capturing video is a bit more intense than capturing audio, we'll take you through this one step at a time.

Serving Your Files

Now that we have created some streaming files, it is time to put those files on a server for the world to see. We'll discuss getting your files onto a media server and how to access those files once they're there.

Adding the Stand-alone Windows Media Player

This article will show you how to add the Windows Media Player to your Web site as a stand-alone application.

Embedding the Windows Media Player

Rather than adding a stand-alone Windows Media Player to your Web site, you can embed it directly into your site. Using ActiveX controls, you'll learn how to embed the player so users of either major browser platform can view your streaming media.

Next Steps

After you've learned how to add media to your Web site, spend some time exploring MSDN for in-depth technical reference material on streaming and interactive media, and Windows Media Technologies ( https://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnanchor/html/audiovideo.asp ). And when you're ready to move from basic streaming media, you'll also want to visit the MSDN Online Downloads area ( https://msdn.microsoft.com/downloads/default.asp ) for demos and code examples you can copy and paste to your own Web site.

Part 1: Getting Started

Before adding streaming media to your Web site, you need to identify the reasons for doing so. Will this media help present the overall goal of your site? Like any component of a Web document—text, graphics, links, etc.—you should have a reason for adding streaming media. Placing multimedia elements on a Web site without a clear plan is sure to disrupt your users' experience.

Identify the Kinds of Media You Wish to Present

Do you want your streaming media to be comprised of audio clips? Are you looking to put video clips on your Web site? Perhaps you wish to use a little of both. How much media do you want to add? What level of an integrated multimedia experience do you want to provide for the user? You should answer these questions before you begin, as they will help you to seamlessly integrate streaming media into your Web site, give you an idea of how much time and effort this is going to take, and also how it will impact your budget.

Plan Your Streaming Media Integration

Decide where and how you wish to present your streaming media. Keep in mind that the sheer amount of content that you wish to deliver will likely determine the amount of time and money you need to spend on this project. It will be easiest to start small; adding a few streaming media clips to your pages in the beginning so that you can get a feel for what works best with your site. This doesn't mean, though, that you shouldn't create a comprehensive plan for how you wish to incorporate media into your site.

Know Your Site

You know your site better than anyone else. While it may be easy to simply add a new HTML page and a link from your home page to your streaming media, your visitors will appreciate a more integrated experience. Group your media with similar HTML documents, so that your users can navigate through the information that they need, in whatever format it may be.

Streaming Media Wisdom

The most important thing to know about adding streaming media to a Web site is that this media is just another kind of information, like text and graphics. There may be a bit more to know, but that's why we've prepared this road map for you. Remember that adding streaming media to your Web site doesn't mean that you can throw all of your design and development rules out the window.

Learn More

What's Your Web Approach? ( https://msdn.microsoft.com/workshop/management/planning/hess032398.asp )

Part 2: Creating Audio ASF Files

The first thing we're going to tackle in this milepost is creating audio content. All you need is a WAV file of the audio you want to stream, the Windows Media Services Tools ( https://www.microsoft.com/NTServer/techresources/streaming/default.asp ), and the Windows Media Player ( https://www.microsoft.com/windows/windowsmedia/download/default.asp ).

If you don't have a WAV file already, you'll need to create one. A simple way of doing this is to record one using the Windows Sound Recorder tool. Usually, this tool is found on the Start menu. To locate it, click the Start button, point to Programs, then Accessories, Multimedia, and then click Sound Recorder. This tool can record up to 60 seconds of audio (though there are many programs that can record more—hours and hours if need be) in many different formats.

Garbage In, Garbage Out

The "Garbage In, Garbage Out (GIGO) effect" is an old computer term. Basically, it means that your output is really determined by your input. When creating streaming media, this is especially relevant. If your source data isn't of the highest-possible quality, your end result will definitely suffer.

General Pointers for Recording Audio

Background noise should be kept to a minimum. For instance, if you record audio next to a computer you'll likely get an ambient hum from the computer fan. This is often unavoidable, but it is definitely something to keep in mind.

Make sure to record enough data to allow the audio CODEC to have ample data to work with. When you record your audio, you can record in a variety of sample rates and bit depths. An audio file's sample rate is the number of times per second that the audio data changes (usually a factor of 8000 or 11025—industry standard numbers that most sound cards support). Bit depth is the range that the audio data changes. An 8-bit file has 256 distinct levels of sound per sample whereas a 16-bit file has 65,536 levels.

Setting Up Your Computer to Record High Quality Audio

In your multimedia settings in the Control Panel, you can select different sample rates and bit depths. A good rate to encode at is 22050 samples at 16 bits. To set this up, do the following:

  1. From the Start button, point to Settings, and click Control Panel. In the Control Panel window, double-click Multimedia. On the Audio tab, locate the Recording section, and click the Customize button.

  2. Make sure PCM is selected in the Format drop down list and change the Attributes drop down box to 22.050 kHz, 16 Bit, Mono (if you prefer to record in stereo, then alter this setting accordingly).

  3. Click the Save As button, and name your new profile. Make sure that this profile is now set as your default recording profile. And you're done.

    Figure 1: Setting up your computer to record high quality audio

Creating ASFs

Now that your computer is set up, let's create some ASF files. To open up the Windows Media Encoder (part of the Windows Media Services Tools you previously installed), click the Start button, point to Programs, point to Windows Media Services, and click Windows Media Encoder. In the Welcome window, select Template with I/O options (QuickStart is only for live encoding) then click OK. You should see something like this:

Figure 2: The Windows Media Encoder

  1. Since we're starting with 28.8-Kbps audio, we'll need to select an audio template. Make sure that the check box next to Show scalable video templates only is cleared. The top line in the Template list should read 28.8 Audio. (We'll cover scalable video in the next Milepost.)

  2. Click Next.

  3. Select AVI/WAV/MP3 File, and click Next.

  4. Specify the location of your WAV file, and then click Next.

  5. Select To a local ASF file, and click Next.

  6. In the File name box specify a name for your new ASF file, for example "c:\myMedia.asf." Click Finish.

  7. The setup is now complete. In the Untitled - Windows Media Encoder window, click the Start button (the black arrow button on the toolbar.)

    Figure 3: The Windows Media Encoder Start button

Once you click the Start button, it will become shaded, and the Stop button (to the immediate right of the Start button) will be active. You'll know that your file is finished when the Stop button becomes shaded and the Play button becomes available again. Close the Windows Media Encoder window and if asked if you want to save changes, click No.

To listen to your file, locate your ASF file (i.e., C:\myMedia.asf) and double-click it. The Media Player will then open up the file and play your new audio clip. Congratulations! You have just created your first piece of streaming media.

Learn More

Adding Audio Clips to Your Web Site ( https://msdn.microsoft.com/workshop/imedia/windowsmedia/solutions/aclips/aclips.asp )
Audio for Streaming: A Content Creation Scenario ( https://msdn.microsoft.com/archive/default.asp?url=/archive/en-us/dnarwmt/html/IntroToWMT.asp )

Part 3: Creating Video ASF Files

Capturing video is a bit more intense than capturing audio. Most computers today have sound cards, but video capture cards are not quite as common. So the first thing you'll need is a video capture card. We'll try to keep this general, so any capture card listed in the Windows Media Hardware Providers page ( https://www.microsoft.com/windows/windowsmedia/forpros/service_provider/hardware/default.aspx ) should work fine—though many other cards will work as well. Basically, you need a card that will produce a high-quality, uncompressed AVI file.

GIGO Revisited

In the last milepost, we talked about the GIGO (Garbage In, Garbage Out) effect and how you need to make sure that you have a good clean source before you compress your data. When dealing with video files, this is even more important.

Make sure that your source video itself is clean, with the least possible movement. For example, if you're shooting the video yourself, make sure that the camera is mounted on a tripod to reduce movement. Things like zooming in and out creates more motion in the video, which is harder to compress. Record on the highest-quality medium to which you have access. The Sony Betacam is the preferred format, but VHS is acceptable if it's all you have. It's important that your source file should be as clean as possible as the CODEC sees things that you don't.

When capturing your video, make sure that you're not saving the video in a compressed format. Unfortunately, when dealing with video of any kind, you're dealing with a lot of hard drive space. The best format to use is uncompressed, though an uncompressed clip can quickly take up 2 GB of data.

Capturing the Video

Since every video card has a slightly different way of capturing the actual video, we can't comprehensively explain video capture here. Since each capture card has it's own peculiarities, be sure to read the card's instructions.

Creating Video ASFs

So now that you have your AVI files, let's put them through the encoder. The first thing we need to decide is just how much bandwidth to send out. Since most users connect with a 28.8-Kbps modem, we'll assume that we're creating content for these users, even though higher bandwidth means higher-quality files.

Let's open the encoder, now. From the Start button, point to Programs, point to Windows Media Services, and click Windows Media Encoder. Just as we did in the previous milepost, in the Welcome window select Template with I/O options and click OK. In the Template area, click Show scalable video templates only to see a list of only scalable video templates.

When you create scalable video, you're creating files that are meant to be streamed from a Windows Media Services Server. They are really files that contain multiple video tracks for a given bandwidth. If network congestion causes your users to fail to receive all of the information for your clip, Windows Media Services is smart enough to start sending down less information. This wouldn't be possible from a Web server. Media streaming enables a user to watch a clip with reasonable quality—even when the Internet is busy—without having to wait and have the clip constantly buffer. It is highly recommended that you use scalable video whenever possible, so make sure to use a scalable template.

Selecting Your Template

Since we're creating 28.8-Kbps content, we now have three options, a high-motion template, a music video template, or a presentation template. There are two very important questions that you need to ask yourself.

First, how important is the audio to your clip? Since you have a fixed amount of bandwidth, do you want to allocate the most bandwidth possible to the video, or do you want to have better audio? This is a tradeoff that you'll need to make. A point of caution here: "The eye can tolerate what the ear cannot." This means that if the audio is harsh and garbled, your users are less likely to be satisfied with your media. Your decision should be based on your reasons for wanting to add media to your Web site.

Second, how much motion does your video contain? A video of the nightly news will almost always have less motion than a music video, and compression schemes can be optimized for the amount of movement you're using in your video.

If you need to give your clip more data to audio, then select one of the "Music" templates. If you want to give more data to video, choose the High Motion Scalable Video template. If you have a good steady shot of someone's head without music, try the Presentation Scalable Video template. As you create more ASFs, you'll begin to understand better which templates to use where. For now, you might try encoding your clip using all three templates (encode it using the first template, when that is finished use the second, etc.).

Finishing Up

Once you've decided which template to use, follow these steps:

  1. Ensure the template you want to use is selected, then click Next.

  2. If you are asked whether you want to use live or stored content, select the AVI/WAV/MP3 File, and click Next.

  3. Specify where your AVI file lives in the File Name box, and click Next.

  4. Now specify a File Name for your new ASF file, for example: "c:\myMedia.asf." Then click Finish.

The setup is now complete. so it is again just a matter of clicking the Start button. Once you click on the Start button, it will become shaded, and the Stop button will be available. You'll know that your file is finished when the Stop button becomes shaded and the Play button returns. Now it is time to play the file. Simply open up the directory where you stored your ASF, and double-click it. The media player will then open up the file and play your new audio clip. Congratulations! You have just created your second piece of streaming media, a video clip.

Learn More

Windows Media Knowledge Center ( https://www.microsoft.com/windows/windowsmedia/knowledgecenter/default.aspx )

Part 4: Serving Your Files

Now that you've created your media, you need to how to stream it! This section is pretty straightforward; however, you will need to have access to a Windows NT Server or newer Windows server with the Windows Media Services installed. This server doesn't have to be the same one that your HTML files live on, but it's fine if your files do live on this server.

First Step

Your Internet Service Provider (ISP) may provide the Windows Media Services, or you may have to find a separate hosting service ( https://www.microsoft.com/windows/windowsmedia/forpros/service_provider/programs/wmsp.aspx ). Check with your ISP to see what services they offer.

Second Step

Put your streaming media files into the ASFROOT directory of the Windows Media Services Server. You may need a system administrator's help for this, in order to determine where this directory is, write permissions, and other site administrator tasks.

Third Step

Access your content by opening up a Windows Media Player, then click Open from the File menu. You should be presented with a dialog box asking where your content lives. If the server has a name, e.g., sample.microsoft.com, then you should be able to access the content in the following manner: mms://sample.microsoft.com/path/myfile.asf. Of course, you'll need to update this path to reflect where your content actually lives.

In the above address, /path/ needs to be changed to the path from the ASFROOT. For example, if the files live on the server at "d:\program files\WindowsMedia\ASFRoot\userContent\bob\," the Path would actually be "userContent/bob," just how a Web server works.

You'll note that the file extension that we're using is ".asf", which is the file extension for ASF files. You'll also notice that instead of beginning our address with "https://," we're starting with "mms://". This is how the server knows that it is using the Windows Media Services Server instead of another server, which may be installed on the same machine.

That's It

That wasn't too difficult, was it? Just like a Web site, the process is to get a server, upload the files into the appropriate directories, and then do some testing. Once you've created these files, how will your users get them? You can't ask them to open their media players and then type in the address to your ASF file. We've got to make it easier for them, and that's what the next Milepost is all about.

Learn More

Windows Media Service Providers ( https://www.microsoft.com/windows/windowsmedia/forpros/service_provider/programs/wmsp.aspx )

Part 5: Adding the Stand-alone Windows Media Player

Now that your media clips are on your Windows Media Services Server, you need to add elements into your HTML and on your Web server so that you can access these files. You can either have your users use the Windows Media Player as a stand-alone application, or put the player directly into the Web page. This milepost shows you the ins and outs of adding media with the stand-alone player.

ASX Files and the Stand-Alone Player

A simple, yet effective method of playing Windows Media, is to simply reference an ASF Stream Redirector (ASX) file. An ASX file is an Extensible Markup Language (XML)-based text file which references a Uniform Resource Locator (URL) for a piece of media content.

That is a whole train load of acronyms. Simply put, an ASX file is a shortcut to media content that resides on your Web server.

An ASX file should always be used to reference media content for the stand-alone player for two main reasons:

  1. Browsers other than Microsoft Internet Explorer do not intrinsically understand the Microsoft Media Server (MMS) streaming protocol. As such, they cannot locate or obtain information about the Media File.

  2. Without an ASX file, content cannot stream to the stand-alone media player. When you click on a link in a browser, that file is downloaded to the browser's cache. However, when you click on a link to an ASX, the ASX (which is a very small download) gets downloaded into the cache, and then launches the helper application associated with the ASX MIME type (application/mplayer2 or video/x-ms-asf), which is the Windows Media Player. This, of course, saves download time and takes advantage of intelligent media serving technology.

Ok, so I'll use an ASX file, but how complex are they?

Writing an ASX File

ASX files are very similar to HTML. They use tags in a way that is very similar to HTML, and some of the tags are even the same. Here's the basic Syntax for an ASX:

<ASX version="3.0"> 
<TITLE>Simple ASX</TITLE> 
<ENTRY> 
<TITLE>An Entry in a Simple ASX</TITLE> 
<AUTHOR>Your Name Here</AUTHOR> 
<REF HREF="mms://windowsmediaserver/path/yourfile.asf"/> 
</ENTRY> 
</ASX>

Note: remember that trailing slash in the <REF> tag, otherwise your ASX won't work.) Then you can change the title to whatever you want it to be. When saving this file, don't forget to save it as an ASX (.asx) file. If you want more detail, you should probably download the SDK ( https://www.microsoft.com/NTServer/techresources/streaming/default.asp ), which contains a plethora of information.

Point to Your ASX

To reference an ASX file, simply add the following code to your Web page:

<A HREF="https://webserver/path/yourfile.asx">Link to Streaming Content</A>

The browser will open this file and then launch the Windows Media Player to play this content.

That's it! You're now streaming multimedia that your users can see and hear.

Learn More

All about ASX Files ( https://msdn.microsoft.com/archive/en-us/samples/internet/imedia/netshow/simpleasx/default.asp )
Download the SDK ( https://www.microsoft.com/NTServer/techresources/streaming/default.asp )

Part 6: Embedding the Windows Media Player

Microsoft Internet Explorer browsers use a technology called Microsoft ActiveX® ( https://activex.microsoft.com/ ) to add components to Web pages. These controls reside in the page in almost the same way an image or HTML markup does. ActiveX is a large and diverse topic, which we won't go into much detail about here. Just know that the Windows Media Player ActiveX Control can be embedded into a Web page.

As an ActiveX control, the Media Player control makes use of automation to expose methods and properties, and to provide event support. While ActiveX controls, like the player control, can be used as components in a variety of programming environments, they are extremely well-suited for use in Web pages. ActiveX controls can be used to add exciting dynamic content to previously static Web pages, and they are easy to distribute over networks.

Inserting the Player Control

The <OBJECT> tag is used to embed ActiveX objects, such as the Media Player control, into an HTML page. Following is an example of using the <OBJECT> tag to insert the player control:

<OBJECT ID="MediaPlayer1" WIDTH=320 HEIGHT=240 
CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" 
CODEBASE="https://activex.microsoft.com/activex/controls/mplayer/en/ 
nsmp2inf.cab#Version=5,1,52,701" 
standby="Loading Microsoft Windows Media Player components..." 
type="application/x-oleobject"> 
<Param Name="FileName" Value="mms://myserver/mypath/myfile.asf"> 
</OBJECT>

If you put this code into your Web page, then you've put the media player into your Web page for Internet Explorer. That wasn't so hard, was it? All you need to do is update the "FileName" parameter to your file's path. And by embedding the control, you can link either to an ASX file, or skip that step completely.

Crossing Browsers

As Netscape Navigator cannot communicate directly with Microsoft ActiveX controls, Microsoft Windows Media Player includes a plug-in (Npdsplay.dll) to allow users of Netscape Navigator to watch ASF content.

Basically, the <OBJECT> tag won't work with Netscape, and so we need to use the plug-in embedding architecture (<EMBED>). Luckily, we can use both architectures using the following snippet of code:

<!-- BEGIN GENERIC ALL BROWSER FRIENDLY HTML FOR NETSHOW V3 --> 
<OBJECT ID="MediaPlayer" width=320 height=240  
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" 
codebase="https://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=,1,52,701" 
standby="Loading Microsoft Windows Media Player components..."  
type="application/x-oleobject"> 
<PARAM name="FileName" value="mms://myserver/mypath/myfile.asf"> 
<EMBED type="application/x-mplayer2"  
pluginspage="https://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" 
SRC="mms://myserver/mypath/myfile.asf" 
name="MediaPlayer" 
width=320 
height=240> 
</EMBED> 
</OBJECT>

Finishing Up

Congratulations! You're now able to embed the player in either major browser platforms. There are thousands of things you can do with an embedded player, so if you want some more information, you visit the Windows Media Samples section in the MSDN Online Library. ( https://msdn.microsoft.com/library/en-us/dnanchor/html/audiovideo.asp )

Learn More

Download the SDK ( https://msdn.microsoft.com/library/en-us/dnanchor/html/anch_winmedsdk.asp )
ActiveX ( https://activex.microsoft.com )

Next Steps

Now that you've learned how to add media to your Web site, spend time exploring the MSDN Online Library for in-depth technical reference material on Streaming and Interactive Media ( https://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnanchor/html/audiovideo.asp ) and Windows Media Technologies ( https://www.microsoft.com/windows/windowsmedia/knowledgecenter/default.aspx ). And when you're ready to move from basic streaming media, you'll also want to visit the Downloads area ( https://www.microsoft.com/windows/windowsmedia/download/default.aspx ) for demos and code examples you can copy and paste to your own Web site. Where you go from here is left up to your imagination.

Photo Credits: PhotoDisc